<template>
	<view class="page-box">

		<scroll-view class="page-scroll" scroll-y>
			<view class="page-scroll-content">
				
				<view class="box-avatar">
					<image class="box-image" src="../../../static/img/tabbar/home.png"></image>
					<view @click="clkChangeAvatar" class="box-txt common-text-title1">修改</view>
				</view>

				
				<u-upload @on-choose-complete="onChooseComplete" ref="uUpload" :showUploadList=false max-count='1' class="row-t1-25 row-center" :custom-btn="true">
				</u-upload>

				<u-cell-group class="row-t1-25" title-bg-color="rgb(243, 244, 246)">
					<u-cell-item class="border-top u-cell-item-m" :arrow=showArrow>
						<view slot="title" class="common-text-title1">姓名</view>
						<view slot="right-icon">
							<input placeholder-style="color: #949494;font-size: 31rpx;" placeholder="请输入真实的医师姓名">
							</u-field>
						</view>
					</u-cell-item>
					<u-cell-item class="border-top u-cell-item-m" @click="dcHospitalCfg.showSelect = true"
						:arrow=showArrow>
						<view slot="title" class="common-text-title1">医院</view>
						<view slot="value" class="common-text-title1-gray">
							{{dcHospitalCfg.selectedValue?dcHospitalCfg.selectedValue:'选择所在的医疗机构'}}</view>
						<view slot="right-icon" class="right-arrow"></view>
					</u-cell-item>
					<u-cell-item class="border-top u-cell-item-m" @click="dcDepartCfg.showSelect = true"
						:arrow=showArrow>
						<view slot="title" class="common-text-title1">科室</view>
						<view slot="value" class="common-text-title1-gray">
							{{dcDepartCfg.selectedValue?dcDepartCfg.selectedValue:'选择所在的科室'}}</view>
						<view slot="right-icon" class="right-arrow"></view>
					</u-cell-item>
					<u-cell-item class="border-top u-cell-item-m" @click="dcPostCfg.showSelect = true"
						:arrow=showArrow>
						<view slot="title" class="common-text-title1">职称</view>
						<view slot="value" class="common-text-title1-gray">
							{{dcPostCfg.selectedValue?dcPostCfg.selectedValue:'请选择职称'}}
						</view>
						<view slot="right-icon" class="right-arrow"></view>
					</u-cell-item>
					<u-cell-item class="border-top border-bottom u-cell-item-m" @click="dcTitleCfg.showSelect = true"
						:arrow=showArrow>
						<view slot="title" class="common-text-title1">职务</view>
						<view slot="value" class="common-text-title1-gray">
							{{dcTitleCfg.selectedValue?dcTitleCfg.selectedValue:'请选择职务'}}
						</view>
						<view slot="right-icon" class="right-arrow"></view>
					</u-cell-item>

				</u-cell-group>

				<view class="row-t1-25 common-text-title1">请上传相关证件照片（包括《医师执业证书》等）</view>

				<u-upload class="row-t1-25" :custom-btn="true">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<!-- <u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon> -->
					</view>
				</u-upload>

				<view class="row-t1-25 common-text-title1">请上传手持身份证照片</view>

				<u-upload class="row-t1-25" :custom-btn="true">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<!-- <u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon> -->
					</view>
				</u-upload>


			</view>

		</scroll-view>

		<view>
			<u-button class='btn-submit' @click="clkSubmit()" :ripple="true">提交认证</u-button>

		</view>

		<u-select v-model="dcTitleCfg.showSelect" mode="single-column" :list="dcTitleCfg.listData"
			@confirm="confirmDcTitle">
		</u-select>
		<u-select v-model="dcPostCfg.showSelect" mode="single-column" :list="dcPostCfg.listData"
			@confirm="confirmDcPost">
		</u-select>
		<u-select v-model="dcDepartCfg.showSelect" mode="mutil-column-auto" :list="dcDepartCfg.listData"
			@confirm="confirmDcDepart">
		</u-select>
		<u-select v-model="dcHospitalCfg.showSelect" mode="mutil-column-auto" :list="dcHospitalCfg.listData"
			@confirm="confirmDcHospital">
		</u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dcHospitalCfg: {
					showSelect: false,
					selectedValue: '',
					selectedIds: '',
					listData: [{
							value: 1,
							label: '北京',
							children: [{
									value: 2,
									label: '东城区',
									children: [{
											value: 3,
											label: '医院名称'
										},
										{
											value: 4,
											label: '医院名称'
										}
									]
								},
								{
									value: 5,
									label: '朝阳区',
									children: [{
											value: 6,
											label: '医院名称'
										},
										{
											value: 7,
											label: '医院名称'
										}
									]
								}
							]
						},
						{
							value: 8,
							label: '天津',
							children: [{
								value: 9,
								label: '东城区',
								children: [{
									value: 10,
									label: '医院名称'
								}, {
									value: 10,
									label: '医院名称'
								}, ]
							}]
						}
					],

				},
				dcDepartCfg: {
					showSelect: false,
					selectedValue: '',
					selectedIds: '',
					listData: [{
							value: 1,
							label: '内科',
							children: [{
									value: 2,
									label: '心血管内科',
								},
								{
									value: 5,
									label: '消化内科',
								}
							]
						},
						{
							value: 8,
							label: '外科',
							children: [{
								value: 9,
								label: '风湿科',
							}, {
								value: 10,
								label: '呼吸科',
							}]
						}
					],

				},
				dcPostCfg: {
					showSelect: false,
					selectedValue: '',
					selectedIds: '',
					listData: [{
							value: '1',
							label: '未定级（含研究生在读）'
						},
						{
							value: '2',
							label: '初级职称'
						},
						{
							value: '3',
							label: '中级职称'
						}
					],

				},

				dcTitleCfg: {
					showSelect: false,
					selectedValue: '',
					selectedIds: '',
					listData: [{
							value: '1',
							label: '院长'
						},
						{
							value: '2',
							label: '副院长'
						},
						{
							value: '3',
							label: '科室/部门主任'
						},
						{
							value: '4',
							label: '普通医师/护士/药师/职员'
						}
					],
				},

				showArrow: false,
				loadStatus: ['loadmore'],
			};
		},
		onLoad() {},
		computed: {},
		methods: {
			onChooseComplete: function(lists, name) {
				console.log(lists[0].url);
			},
			clkChangeAvatar: function() {
				this.$refs.uUpload.selectFile();
			},
			// 页面数据
			getOrderList(idx) {
				for (let i = 0; i < 15; i++) {
					let index = this.$u.random(0, this.dataList.length - 1);
					let data = JSON.parse(JSON.stringify(this.dataList[index]));
					data.id = this.$u.guid();
					this.orderList[idx].push(data);
				}
				this.loadStatus.splice(0, 1, "loadmore")
			},
			clkSubmit: function() {},
			confirmDcTitle: function(selectedValue) {
				if (selectedValue && selectedValue.length > 0) {
					console.log(selectedValue[0].label);
					this.dcTitleCfg.selectedValue = selectedValue[0].label;
				}
			},
			confirmDcPost: function(selectedValue) {
				if (selectedValue && selectedValue.length > 0) {
					console.log(selectedValue[0].label);
					this.dcPostCfg.selectedValue = selectedValue[0].label;
				}
			},
			confirmDcHospital: function(selectedValue) {
				if (selectedValue && selectedValue.length > 0) {
					console.log(selectedValue[0].label);
					this.dcHospitalCfg.selectedValue = '';
					this.dcHospitalCfg.selectedIds = '';
					let _this = this;
					selectedValue.forEach(function(cur, index, array){
						if(_this.dcHospitalCfg.selectedValue) {
							_this.dcHospitalCfg.selectedValue += "," + cur.label;
						} else {							
							_this.dcHospitalCfg.selectedValue += cur.label;
						}
					})
				}
			},
			confirmDcDepart: function(selectedValue) {
				if (selectedValue && selectedValue.length > 0) {
					console.log(selectedValue[0].label);
					this.dcDepartCfg.selectedValue = '';
					this.dcDepartCfg.selectedIds = '';
					let _this = this;
					selectedValue.forEach(function(cur, index, array){
						if(_this.dcDepartCfg.selectedValue) {
							_this.dcDepartCfg.selectedValue += "," + cur.label;
						} else {							
							_this.dcDepartCfg.selectedValue += cur.label;
						}
					})
				}
				
			},

		},

	};
</script>
<style lang="scss" scoped>
	.page-box {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;

		.page-scroll {
			height: 100rpx;
			flex-grow: 1;

			.page-scroll-content {
				padding: 37rpx 29rpx 10rpx;
				display: flex;
				flex-flow: column nowrap;

			}
		}
	}


	.btn-submit {
		width: 308rpx;
		margin-top: 38rpx;
		margin-bottom: 23rpx;
		height: 62rpx;
		background: #3FA7FF;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 4rpx;

		font-size: 31rpx;
		font-family: SimHei;
		font-weight: 400;
		line-height: 40rpx;
		color: #FFFFFF;
		opacity: 1;
	}



	.u-cell-item-m {
		padding: 29rpx 0;
	}
	
	.box-avatar{
		display: flex;
		flex-flow: row nowrap;
		padding: 52rpx;
		justify-content: center;
		align-items: baseline;
		.box-image {
			width: 154rpx;
			height: 154rpx;
			background: #4D5B80;
			border-radius: 50%;
			opacity: 1;
		}
		
		.box-txt {
			border-bottom: 2rpx solid #4D5B80;
			padding-bottom: 0;
			opacity: 1;
		}
	}
</style>
